<template>
  <!-- 文本消息 -->
  <div class="msg-bubble-container">
    <div
        class="msg-bubble-class"
        :class="{
     'left-msg-bubble-class': !self,
     'right-msg-bubble-class': self,
   }"
    >
      <span style="color: white" v-html="msgBody.content"></span>
    </div>
    <br>
    <br>
    <div
        v-if="msgBody.reply"
         class="reply-msg-contain"
         :class="{
     'left': !self,
     'right': self,
   }">
      <div :class="{
     'left': !self,
     'right': self,
   }">
        <!-- 回复内容 -->
        <div @click="skipToMsg(msgBody.reply)">
          <!-- 根据不同类型展示内容 -->
          <div v-if="msgBody.reply.type === $msgUtils.TEXT_MSG" class="reply-msg-contain-text">{{ text_msg_reply }}</div>
          <div v-if="msgBody.reply.type === $msgUtils.IMG_MSG" class="reply-msg-contain-text">【图片】</div>
          <div v-if="msgBody.reply.type === $msgUtils.FILE_MSG" class="reply-msg-contain-text">【文件】</div>
          <div v-if="msgBody.reply.type === $msgUtils.EMOJI_MSG" class="reply-msg-contain-text">【表情包】</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    self: {
      type: Boolean,
      require: true,
    },
    msgBody: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      currUid: this.$store.state.user.currentUser.uid,
    };
  },
  methods: {
    // 跳转到指定消息
    skipToMsg(reply) {
      this.$EventBus.$emit("skipToMsg", reply);
    }
  },
  mounted() {
    const atElementList = document.getElementsByClassName("at-class");
    for (let i = 0; i < atElementList.length; i++) {
      let uidNode = atElementList[i].attributes.uid;
      if (uidNode && Number(uidNode.nodeValue) === this.currUid) {
        // 添加高亮样式
        atElementList[i].style.background = "#6a6e7c";
      }
    }
  },
  computed: {
    text_msg_reply() {
      return this.$common.parseHTMLMsg(this.msgBody.reply.body.content)
    }
  }
};
</script>

<style scoped>
.msg-bubble-container {
}
.msg-bubble-class {
  max-width: 600px;
  background-color: #414141;
  padding: 10px;
}

.left-msg-bubble-class {
  float: left;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.right-msg-bubble-class {
  float: right;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.left {
  float: left;
}
.right {
  float: right;
}

.reply-msg-contain {
  min-width: 100px;
  margin-top: 5px;
  color: white;
  font-size: 12px;
}

.reply-msg-contain-text {
  max-width: 200px;
  white-space: nowrap;  /* 不换行 */
  overflow: hidden;    /* 隐藏超出的内容 */
  text-overflow: ellipsis;  /* 超出部分用...显示 */
}

.reply-msg-contain :hover {
  cursor: pointer;
}
</style>
